<template>
	<div class="front_list_container" v-loading="loading">
		<div class="front_list_header">
			<div class="button">
				<slot name="button"></slot>
			</div>
			<slot name="query" v-if="!!$slots.query"></slot>
		</div>
		<div class="front_list_content" v-if="!!$slots.content">
			<slot name="content" v-if="count > 0"></slot>
			<el-empty v-else :image-size="160" :image="nodataImage" :description="`暂无${title}数据`" />
		</div>
		<div class="front_list_footer" v-if="!!$slots.page && count > 0">
			<slot name="page"></slot>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		count: { type: Number, default: 0 },
		title: { type: String, default: '' },
		loading: { type: Boolean, default: false }
	},
	data() {
		let nodataImage = require('./nodata.svg');
		return { nodataImage };
	},
	computed: {
		isExistFrameTop() {
			let slots = this.$slots || {};
			return !!slots.button || slots.query || slots.mode;
		}
	},
	mounted() {
		console.log(this.nodataImage);
	}
};
</script>

<style lang="scss" scoped>
.front_list_container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	padding-top: 16px;
	overflow: hidden;
	height: 100%;
	flex: 1;
}
.front_list_header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-shrink: 0;
	padding: 0 16px;
	.button {
		display: flex;
		align-items: center;
		h5 {
			font-size: 18px;
		}
	}
	&:deep(.el-input) {
		font-size: 16px;
	}
	&:deep(.el-button) {
		font-size: 16px;
		padding: 9px 16px;
		i + span {
			font-size: 15px;
		}
	}
	.el-form--inline {
		display: flex;
	}
	&:deep(.el-form-item) {
		margin-bottom: 0;
		&:last-child {
			margin-right: 0;
		}
	}
	&:deep(.el-form-item__content) {
		line-height: 1;
	}
}
.front_list_content {
	overflow: hidden;
	padding: 16px;
	flex: 1;
	&:has(.el-empty) {
		display: flex;
		flex-direction: column;
	}
	.el-empty {
		flex: 1;
		overflow: hidden;
		border-radius: 4px;
		border: solid 1px #ebeef5;
	}
	&:deep(.el-empty__image) img {
		width: 100%;
	}
	&:deep(.el-empty__description) {
		line-height: 1;
		margin-top: 20px;
	}
}
.front_list_footer {
	flex-shrink: 0;
	padding: 0 16px;
	border-bottom: solid 16px transparent;
	&:deep(.el-pagination) {
		button,
		span:not([class*='suffix']) {
			font-size: 16px;
		}
		.el-input__inner {
			font-size: 15px;
		}
	}
}
</style>
